<!-- html -->
<template>
  <div template style="height:100%">
    <!-- left -->
    <div class="left">
      <div class="leftitem" v-for="v in arr" @click="setsrc(v)">{{ v.name }}</div>
    </div>
    <!-- right -->
    <div class="cont">
      <div class="title">
        <div class="titleleft">
          当前位置：{{ title }}
        </div>
        <div class="righticon">
          <img src="../public/favicon.ico" alt="">
        </div>
      </div>
      <div class="window">
        <iframe :src="src" style="height:100%;width:100%" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</template>

<!-- script -->
<script>
import '../public/jquery-1.12.4'
export default {
  data() {
    return {
      arr: [],
      src: '',
      title: ''
    }
  },
  methods: {//
    getleftlist() {
      $.ajax({
        url: '/aappii_file/UI_library_list.json?date=' + new Date().getTime(),
        success: res => {
          this.arr = res
          this.setsrc(this.arr[0])
        }
      })
    },
    setsrc(v) {
      this.src = v.link || 'http://info.cern.ch/'
      this.title = v.name || '/'
    }
  },
  mounted() {
    this.getleftlist()
  }
}
</script>

<!-- css -->
<style>
html,
body,
#app {
  height: 100%;
}
</style>

<style scoped>
.left {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background-color: #333;
  overflow: hidden auto;
}

.leftitem {
  padding: 20px;
  word-break: break-all;
  color: white;
  cursor: pointer;
}

.cont {
  margin-left: 280px;
  min-width: 320px;
  height: 100%;
}

.title {
  height: 65px;
  padding: 0 20px;
  background-color: #ccc;
}

.titleleft {
  display: inline-block;
  padding-top: 20px
}

.righticon {
  float: right;
  padding-top: 12.5px;
}

.righticon img {
  width: 40px;
  height: 40px;
}

.window {
  height: calc(100% - 65px);
  overflow: hidden;
}
</style>